<template>
  <div class="addCus">
    <h2>客服管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button
          type="info"
          icon="el-icon-arrow-left"
          size="small"
          @click="getBack"
          >返回</el-button
        >
      </div>
    </div>
    <div class="formBox">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">类型</span>
            </label>
            <el-select v-model="userData.type" class="form-control select2">
              <el-option label="售后" :value="0"></el-option>
              <el-option label="投诉" :value="1"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">状态</span>
            </label>
            <el-select v-model="userData.status" class="form-control select2">
              <el-option label="新客服" :value="0"></el-option>
              <el-option label="处理中" :value="1"></el-option>
              <el-option label="已处理" :value="2"></el-option>
              <el-option label="已取消" :value="3"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客服编号</span>
            </label>
            <el-input
              v-model="userData.number"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">标题</span>
            </label>
            <el-input
              v-model="userData.title"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务方式</span>
            </label>
            <el-select v-model="userData.mode" class="form-control select2">
              <el-option label="电话" :value="0"></el-option>
              <el-option label="传真" :value="1"></el-option>
              <el-option label="邮寄" :value="2"></el-option>
              <el-option label="上门" :value="3"></el-option>
              <el-option label="其他" :value="4"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">来源</span>
            </label>
            <el-input
              v-model="userData.source"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务日期</span>
            </label>
            <div>
              <el-date-picker
                v-model="userData.date"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客户</span>
            </label>
            <el-input readonly v-model="userData.patientName">
              <el-button
                @click="searchPatient"
                type="success"
                slot="suffix"
                id="searchButton"
                >查找</el-button
              >
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客户反馈</span>
            </label>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="userData.feedback"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务内容</span>
            </label>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="userData.content"
            >
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bothBtn">
      <el-button type="primary" @click="addInfo">保存</el-button>
      <el-button type="info" plain>取消</el-button>
    </div>
    <!-- 弹框 -->
    <el-dialog title="查找患者" :visible.sync="dialogTableVisible">
      <el-card>
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          width="200"
          v-model="patientName"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findPatientName"
          ></el-button>
        </el-input>
        <el-table :data="patientData">
          <el-table-column property="type" label="类型" width="60">
            <template slot-scope="scope">
              {{
                scope.row.type == 0 ? "私海" : scope.row.type == 1 ? "公海" : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            property="name"
            label="患者名称"
            width="80"
          ></el-table-column>
          <el-table-column property="sex" label="性别">
            <template slot-scope="scope">
              {{ scope.row.sex == 0 ? "女" : scope.row.sex == 1 ? "男" : "" }}
            </template>
          </el-table-column>
          <el-table-column
            property="age"
            label="年龄"
            width="50"
          ></el-table-column>
          <el-table-column property="phone" label="手机号码"></el-table-column>
          <el-table-column property="idCard" label="身份证"></el-table-column>
          <el-table-column property="userName" label="负责人"></el-table-column>
          <el-table-column property="status" label="状态">
            <template slot-scope="scope">
              <el-tag
                disable-transitions
                type="success"
                v-if="scope.row.status == 1"
                >有效</el-tag
              >
              <el-tag
                disable-transitions
                type="info"
                v-if="scope.row.status == 0"
                >无效</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                @click="choosePatient(scope.row)"
              >
                <i class="el-icon-plus"></i>
                选择该患者
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { addCusInfo, findPatient, findPatientName } from "@/api/customer";
import dayjs from "dayjs";
export default {
  name: "addCustomer",
  components: {},
  created() {
    this.userData.status = 1;
    this.userData.type = 1;
    this.value10 = new Date(); //服务日期
  },
  data() {
    return {
      kehu: "",
      patientData: [], //患者查询数据
      userData: {//动态绑定，不用再赋值
        patientName: "",
        content: "", //服务内容
        createTime: "2023-02-21T09:43:08.568Z",
        creator: "盖茨",
        date: "", //日期
        description: "",
        feedback: "", //服务反馈
        id: 0, //客户
        isDelete: 0,
        mode: 1, //服务方式
        number: "", //客服编号
        patientId: 0,
        source: "", //来源
        status: 0, //状态
        title: "", //标题
        type: 0, //类型
        updateTime: "2023-02-21T09:43:08.568Z",
        userId: 0, //vuex里传，login获得
      },
      //填写的数据
      dialogTableVisible: false,
      value10: "",
      input: "",
      patientName: "",
    };
  },
  methods: {
    dayjs,
    //选择该患者
    choosePatient(obj) {
      console.log(obj);
      this.dialogTableVisible = false; //关闭弹框
      this.userData.patientName = obj.name;
      this.userData.patientId = obj.id;
      console.log('patientId',this.patientId);
      console.log(this.userData.patientName);
    },
    //查找患者方法------------------------------
    searchPatient() {
      this.dialogTableVisible = true;
      this.getPatName(1, 10);
    },
    //查找患者接口---------------------
    async getPatName(currentPage, pageSize) {
      let res = await findPatient({ currentPage, pageSize });
      console.log("查找患者接口-------", res.data.data.list);
      if (res.data.code == 200) {
        this.patientData = res.data.data.list;
      }
    },
    //按照名字查找患者----------------------------------------
    findPatientName() {
      this.findPatient(1, this.patientName, 6);
    },
    //按照名字查找患者接口----------------------------------------
    async findPatient(currentPage, name, pageSize) {
      let res = await findPatientName(currentPage, name, pageSize);
      console.log("按照名字查找患者接口-----", res.data.data.list);
      this.patientData = res.data.data.list;
    },
    //新增接口-------------------
    async addNewInfo(customer) {
      let res = await addCusInfo(customer);
      console.log("保存提交接口------", res.data);
      if (res.data.code == 200) {
        this.$message({
          type: "success",
          message: "新增成功!",
        });
        this.$router.push("/customer/cusManage");
      }
    },
    //新增方法-------------------------
    addInfo() {
      this.userData.date = dayjs(this.userData.date).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.userData.createTime = dayjs(this.userData.createTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.userData.updateTime = dayjs(this.userData.updateTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log(this.userData);
      this.userData.userId = sessionStorage.getItem("userID");
      // console.log("userId", this.userData.userId);
      console.log('0000000000',this.userData);
      this.addNewInfo(this.userData);
    },

    //返回-----------------------------
    getBack() {
      this.$router.push("/customer/cusManage");
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding: 15px;
}
.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}
.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 100%;
  padding: 6px;
  border-radius: 0.25em;
}
.formBox,
.bothBtn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: #fff;
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.col-md-6 {
  width: 50%;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
.form-control {
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}
.form-control {
  display: block;
  width: 100%;
}
.text {
  font-size: 15px;
}
.grid-content {
  margin-top: 20px;
}

/* 日期选择框的宽度 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#searchButton {
  margin-top: 6px;
}
.addCus {
  padding-bottom: 20px;
}
</style>
